<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>购物车</title>
    <link rel="stylesheet" href="css/shopping.css"/>
    <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="js/qxsp.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <!-- 复选框 -->
    <script type="text/javascript">

        $(function () {
            //获取登录用户的信息
            var user = JSON.parse(sessionStorage.getItem("user"));

            //查询出商品详细信息
            var params = getParams();
            $.get("/shop/" + user.id, function (data) {
                $(".spxzz").renderValues({list:data});
                $(".footing").renderValues({list:data});
                console.log(data);


                //li4
                var t = $(".num");
                //li3
                var one = $(".one").html();
                //数量增加操作
                $(".plus").click(function () {
                    t.val(parseInt(t.val()) + 1);
                    if (parseInt(t.val()) != 1) {
                        $('#reduce').attr('disabled', false);
                    }
                    setTotal();
                    //数量减少操作
                    $(".reduce").click(function () {
                        if (parseInt(t.val()) > 1) {
                            t.val(parseInt(t.val()) - 1);
                            setTotal();
//                    $('#reduce').attr('disabled', true);
                        }


//                if (parseInt(t.val()) == 0) {
//                    return false;
////                    $('#reduce').attr('disabled', true);
//                }

                    });
                    function setTotal() {
                        $("#result").html((parseInt(t.val()) * one));//toFixed()是保留小数点的函数
                        /*
                         $("#result").html((parseInt(t.val()) *one).toFixed(2));//toFixed()是保留小数点的函数
                         */
                    }

                    setTotal();
                })

                    $("#checkbox").click(function () {
                        var checkbox = document.getElementById('checkbox');
                        checkbox.value == 1 ? checkbox.value = 2 : checkbox.value = 1;
                        var checkboxs = document.getElementsByName('box');
                        for (var i = 0; i < checkboxs.length; i++) {

                            if (checkbox.value == 1) {
                                checkboxs[i].checked = false;
                            } else {
                                checkboxs[i].checked = true;
                            }
                        }
                    });

                //结算
                $(".li7").click(function () {
                    $.post("/shop/shopCat", {
                        articleId: params.articleId,
                        number: $(".num").val(),
                        totalCost: $("#result").html()
                    }, function (data) {
                        console.log(data);
                        if (data.success) {
                            window.location.href = "Pay.html?articleId=" + params.articleId;
                        }
                    });
                })

            });
        });
    </script>
</head>
<body>
<div class="body">
    <div class="tour">
        <a href="javascript:history.go(-1);" class="tour1"><img src="img/back.png" alt="" style="height: 26px;width: 20px"></a>
        <p>购物车</p>
        <a href="javascript:;" class="tour2"><i class="btn"></i></a>
    </div>
    <div class="spxzz">
        <div class="spxz" render-loop="list">
            <ul>
                <li class="li1"><input type="checkbox" render-value="list.article.id" name="box"/></li>
                <li class="li2"><a href="spxq.html"><img render-src="list.article.picUrl" alt="" style="width: 60px;height: 60px"/></a></li>
                <li class="li3"><span render-html="list.article.articleName"></span><br><span style="color: red">￥</span>
                    <i id="one" class="one" disabled="disabled" render-html="list.article.price"></i>
                </li>
                <li class="li4">
                    <div><a class="reduce">-</a><input type="text" value="1"  class="num"/><a class="plus">+</a></div>
                   <!--数量: <i class="one" disabled="disabled" render-html="list.number"></i>-->
                </li>
            </ul>
        </div>
    </div>
</div>
<div style="clear: both"></div>
<div class="footing">
    <ul>
        <li class="li5"><input type="checkbox" id="checkbox" value="1"/>全选</li>
        <li class="li6">合计：<span class="red">￥<i id="result"></i></span></li>
        <li class="li7"><a>
            <button type="button">结算</button>
        </a></li>
        <!--
                <li class="li7"><a data-href="Pay.html?articleId=" render-key="id" render-fun="getHref"><button type="button">结算</button></a></li>
        -->
    </ul>
</div>
<div class="alert">
    <table border="1" cellSpacing=0 style="width: 100%;text-align: center;border-spacing:0;BORDER-COLLAPSE: collapse">
        <tr>
            <td colspan="2">
                <div style="padding: 0.5rem 0 0.5rem 0;font-size: 1.6rem">提示</div>
                <div style="padding: 0.5rem 0 0.5rem 0;font-size: 1.6rem">确定删除当前商品?</div>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" class="delete"
                        style="border: none;outline: none;background-color: white;font-size: 1.6rem;padding: 0.5rem 0 0.5rem 0;width:100%">
                    确定
                </button>
            </td>
            <td>
                <button type="button" class="none"
                        style="border: none;outline: none;background-color: white;font-size: 1.6rem;padding: 0.5rem 0 0.5rem 0;width:100%">
                    取消
                </button>
            </td>
        </tr>
    </table>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>